Skip to main content

Figma To Code Report June 2024

Β· 10 min read
Stephen Alvin
Co-Founder, FireJet

figma-to-code-report-june-2024

πŸ‘€ Overview​

The biggest issue with Figma-to-code tools today is code quality. As a Figma-to-code plugin ourselves, we needed a way to measure the quality of the code generated, as well as see how we were faring against our competitors.

🧠 Using AI to compare code quality​

This report compares the top 5 most popular Figma to Code tools in the market to give a comparison between each of them to help you decide which is the best for you. For an unbiased result, the evaluation of said tools was done using 3rd party AI tools, namely GPT, Claude and Gemini.

Scroll To:

πŸ”Ž Testing Methodology​

We prompted GPT, Claude, and Gemini to compare the code generated from these tools based on key frontend development metrics.

Frameworks Chosen​

We picked React + Tailwind for the code output format. As of 2024, React is still the most used JavaScript framework of choice according to latest framework usage data from OSS Insight We also chose Tailwind for CSS styling, as it is alos the most popular CSS framework according to reports from State of CSS 2023.

AI Prompt​

https://github.com/kapydev/codeqc/blob/main/src/api/reviewers/ai/CONSTANTS.ts
You are a coding assistant who reviews code quality.
You must return a JSON output that follows the following schema:

// Schema was too long, go to the github above for the full schema

You must return the response in JSON format.

Open Source Code Quality Evaluation​

To make the process faster, we also made an npm package called codeqc to automate part of the process. You can find the npm package here and the GitHub repo here. Feel free to try it out yourself!

πŸ§ͺ Test Cases​

To provide a good gauge of the average Figma design, we needed to test the products against fairly popular Figma designs. After thorough research, we went with Untitled UI one of the most popular Figma templates we could find in the Figma community library

πŸ”—β– Untitled UI - FREE Figma UI kit and design system v2.0

This template had 151,000 downloads, and 6,300 likes, making it a good test case for our analysis.

From this Figma template, we picked 2 common use cases (i.e. Login page and Pricing page).

πŸ“ Frontend Code Metrics we used​

MetricDescription
Format and ReadabilityAssesses clarity and neatness of the code, including consistency of indentation, use of whitespace, meaningful comments, and proper naming conventions.
Component StructureEvaluates the organization of the codebase into components or modules, focusing on logical grouping, separation of concerns, and ease of extension or modification.
Responsiveness and StylingReviews how effectively the application adapts to different screens and orientations, ensuring consistent and harmonious styles and themes.
AccessibilityFocuses on the application's accessibility, adherence to standards like WCAG and ARIA, and usability with assistive technologies.
Code ReusabilityExamines modularity and reusability of code across the application or different projects, encouraging DRY principles.
PerformanceAssesses code efficiency, including load times, responsiveness, resource management, and identification of bottlenecks or overhead.
Best PracticesReviews adherence to industry-standard coding practices, use of secure libraries, error handling, logging, and security from common vulnerabilities.

πŸ–±οΈ Interactive Comparison​

To get an unbiased personal opinion of output code quality and output pixel perfection, use the interactive comparison to compare different outputs for yourself.

Original DesignGenerated Render
image-viewer
image-viewer
Generated Code (Sample)

πŸ€– Code Evaluation Report with LLMs​

A separate table for each LLM was created. You can see a sample here For easier reading, we put in all the tables into GPT-4o to summarize all 6 tables into 2 tables by combining, averaging, and summarizing the table contents.

1️⃣ Test Case 1 Code Report​

We used a simple UI from UntitledUI as a control group.

image-viewer

FireJetLocofyBuilderCodiaFigma-to-code
Score
84.3
82.6
85
78.3
63.3
Format and ReadabilityWell-formatted, readable, consistentConsistent, needs more commentsWell-formatted, needs more commentsWell-formatted, readable, consistentPoorly formatted, inconsistent, lacks comments
Component StructureWell-organized, modular, clear purposeComponent-based, modular, reusableModular, separates concerns, reusableComponent-based, could extract moreLacks clear structure, excessive nesting
Responsiveness and StylingResponsive, adapts well, appealingResponsive units, consistent stylingResponsive, Tailwind CSS, some fixed widthsTailwind CSS, needs more testingUses fixed widths, lacks responsiveness
AccessibilityLacks explicit accessibilityLacks accessibility attributesIncludes basic accessibilityLacks explicit featuresDoesn't follow standards
Code ReusabilityGood reusability, DRY principlesGood reusability, modular componentsReusable components, potential for moreSome reusability, room for improvementLow reusability, repeated elements
PerformanceLacks explicit optimizationEfficient rendering, potential optimizationNo major issues, potential optimizationNo major issues, consider strategiesExcessive nesting may affect performance
Best PracticesFollows modern practices, could improveFollows some practices, areas to improveFollows modern practices, could improveFollows modern practices, needs error handlingDoesn't adhere to practices, lacks security

2️⃣ Test Case 2 Code Report​

This UI was is more complex than the previous test case, providing a better representation of Figma-to-code conversion

image-viewer

FireJetLocofyBuilderCodiaFigma-to-code
Score
86.7
86.7
81.7
76.7
63.3
Format and ReadabilityWell-formatted, readable, minimal commentsWell-formatted, readable, sparse commentsConsistent, readable, needs more commentsReadable, naming could be improvedComplex, verbose, lacks comments
Component StructureWell-organized, clear purposeModular, reusable, clear responsibilityWell-structured, could be further broken downStructured, but needs improvementLacks clear structure, repeated blocks
Responsiveness and StylingResponsive, consistent, Tailwind CSSResponsive, Tailwind CSS, media queriesResponsive Tailwind classesTailwind CSS, fixed widths concerningFixed widths, extensive utility classes
AccessibilityBasic features, needs improvementNeeds improvement, lacks ARIA attributesIncludes some features, needs improvementMinimal considerationNo indication of accessibility
Code ReusabilityGood reusability, components, TailwindGood practices, modular componentsDemonstrates reusability, could be improvedLow reusability, repeated stylesVery low reusability, repeated patterns
PerformanceVite for optimization, needs testingLazy loading, web vitals, needs optimizationLazy loading, CSS classes, needs optimizationNo obvious bottlenecks, needs optimizationInline styles, non-semantic HTML impact performance
Best PracticesTypeScript, secure libraries, needs loggingModern JS, modular, needs securityTypeScript, CSS framework, needs error handlingTypeScript, React, Tailwind CSSDoesn't follow best practices, needs refactoring

πŸ’° Pricing Comparison​

This segment isn't really part of the analysis, but I went ahead to the pricing pages of the Figma-to-code tools and summarized their pricing models so you don't have to.

FireJetLocofyBuilderCodiaFigma To Code
FrameworksReact, Vue, Svelte, HTML, TypeScript, JavaScriptReact, HTML, Next.js, Gatsby, VueReact, Qwik, Vue, Svelte, Angular, HTML, Solid, Marko, MitosisReact, Vue, HTMLReact, HTML
StylingTailwind, CSSCSS Modules, CSS, Tailwind, Styled components, Emotion, InlineTailwind, CSS, Emotion, Styled components, Styled JSXCSS, Tailwind, InlineTailwind, Inline
Tier 12 week free trialFree beta, potential paid plans in the futureFree: Basic features with limited usageFree: Basic features, limited usageFree
Tier 2Pro: 38 USD monthly, 198 USD annually, full access-Basic: $24 monthly, $338 annually, includes enhanced features and higher usage limitsStarter: $29 monthly, $204 annually, includes more features and higher usage limits-
Tier 3Lifetime 248 USD one-time payment, use forever, full access-Growth: $49 monthly, $468 annually, advanced features, increased usage limits, and premium supportPro: $49 per month, $348 annually, advanced features, unlimited usage, and priority support-

TLDR - So which one should I use?​

In conclusion, our comprehensive analysis using third-party AI tools GPT, Claude, and Gemini, evaluated the code quality of five leading Figma-to-code tools.

FireJetLocofyBuilderCodiaFigma-to-code
Pricing Model2 week trial
$38/mth
198/yr
Free beta
Future paid plans
$24/mth
$338/yr
$29/mth
$204/yr
Free
Login Page Test
84.3
82.6
85
78.3
63.3
Pricing Page Test
86.7
86.7
81.7
76.7
63.3

The tools were assessed based on format and readability, component structure, responsiveness and styling, accessibility, code reusability, performance, and best practices.

FireJet emerged as one of the top contenders with strong scores across most categories, particularly in code readability and component structure.

Stay tuned for more code comparisons in the future.

Try the πŸ”₯FireJet plugin now!

Run the FireJet plugin in Figma as usual to try the new features.

As we try to continuously improve FireJet to meet your needs, we welcome any feedback or suggestions you might have. Your input is invaluable as we work hard to make FireJet the best Figma to code tool available. Get priority support on our Discord Community.

Get priority support on our Discord Community here